<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from "vue";
import { getBycategory } from "@/api/item";
import { useColumns } from "./columns";
import * as echarts from "echarts";

const { loading, columns, dataList, pagination, Empty, onCurrentChange } =
  useColumns();

const chartRef = ref();
const enterList = ref([]);
const outList = ref([]);

const option = {
  title: [
    {
      text: "物品入库统计",
      left: "20%"
    },
    {
      text: "物品出库统计",
      right: "20%"
    }
  ],
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      type: "pie",
      radius: [40, 140],
      center: ["25%", "50%"],
      itemStyle: {
        borderRadius: 5
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: []
    },
    {
      type: "pie",
      radius: [40, 140],
      center: ["75%", "50%"],
      itemStyle: {
        borderRadius: 5
      },
      data: outList.value.map(item => {
        return {
          value: item.sum,
          name: item.stashName
        };
      })
    }
  ]
};

watch(
  outList,
  () => {
    option.series[0].data = enterList.value.map(item => {
      console.log("watch", item);
      return {
        value: item.sum,
        name: item.stashName
      };
    });
    option.series[1].data = outList.value.map(item => {
      console.log("watch", item);
      return {
        value: item.sum,
        name: item.stashName
      };
    });
    var myChart = echarts.init(chartRef.value);
    myChart.setOption(option);
  },
  { deep: true }
);

onMounted(async () => {
  getBycategoryList();
});

const getBycategoryList = async () => {
  const res = await getBycategory();
  let enterListd = [];
  let outListd = [];
  res.forEach(item => {
    if (item.number >= 0) {
      enterListd.push(item);
    } else {
      outListd.push(item);
    }
  });
  enterList.value = groupByStashNameToArray(enterListd).map(
    (item, index, arr) => {
      const sum = item.reduce(
        (accumulator, currentValue) => accumulator + currentValue.number,
        0
      );
      return {
        stashName: item[0].stash_name,
        sum
      };
    }
  );
  outList.value = groupByStashNameToArray(outListd).map((item, index, arr) => {
    const sum = item.reduce(
      (accumulator, currentValue) =>
        accumulator + Math.abs(currentValue.number),
      0
    );
    return {
      stashName: item[0].stash_name,
      sum
    };
  });
};

function groupByStashNameToArray(items) {
  const grouped = items.reduce((acc, currentItem) => {
    // 查找是否有同名stash_name的数组已存在于结果中
    const existingGroupIndex = acc.findIndex(
      group => group[0].stash_name === currentItem.stash_name
    );

    if (existingGroupIndex !== -1) {
      // 如果存在，就向该数组添加当前项
      acc[existingGroupIndex].push(currentItem);
    } else {
      // 如果不存在，创建一个新的数组并添加到结果中
      acc.push([currentItem]);
    }
    return acc;
  }, []);

  // 返回二维数组，每个子数组内部是stash_name相同的对象集合
  return grouped;
}
</script>

<template>
  <div class="bar2-box">
    <div ref="chartRef" style="width: 100%; height: 400px"></div>
  </div>
</template>

<style lang="scss">
.pure-table-filter {
  .el-table-filter__list {
    min-width: 80px;
    padding: 0;

    li {
      line-height: 28px;
    }
  }
}
</style>

<style lang="scss" scoped>
:deep(.el-table) {
  --el-table-border: none;
  --el-table-border-color: transparent;

  .el-empty__description {
    margin: 0;
  }

  .el-scrollbar__bar {
    display: none;
  }
}
</style>
